const path = require('path') // 导入 node.js 中专门操作路径的模块

// 导入生成的预览页面的插件， 得到一个构造函数
const HtmlWebpackPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlWebpackPlugin({ // 创建插件的实例对象
    template: './src/index.html', // 指定要用到的模板文件
    filename: 'index.html' // 指定生成的文件的名称， 该文件存于内存中， 在目录中不显示
})

// 导入要用到的vue加载器的插件
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {

    // 编译模式
    mode: 'development', // mode 用来指定构建模式：development production
    entry: path.join(__dirname, './src/index.js'), // 引用文件的来源

    output: {
        path: path.join(__dirname, './dist'), // 输出文件的存放路径
        filename: 'bundle.js' // 输出文件的名称
    },
    //plugins 数组是 webpack 打包期间 会用到的一些插件列表
    plugins: [
        // 下面就是一些具体的插件【一定要确保下面 的插件的引入】
        htmlPlugin,
        new VueLoaderPlugin()
    ],
    // 所有第三方文件模块的匹配检测
    module: {
        rules: [
            { test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] },
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
            { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
            // 其中 test 表示匹配的文件的类型， use 表示对应要调用的 loader
            {
                test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
                use: 'url-loader?limit=2704409'
            },
            // exclude 为排除项 ， 表示 babel-loader 不需要处理 node-modules 中的 js 文件
            { test: /\.js$/, use: ['babel-loader'], exclude: /node-modules/ },
            { test: /\.vue$/, use: 'vue-loader' }
        ]
    }
}